<template>
  <div class="rule-box">
    <a-space :size="22" direction="vertical">
      <page-form ref="formRef" :model="todoDetail" :rules="rules" layout="vertical" class="rule-container">
        <!-- 芝麻免押租车押金 -->
        <card :headerStyle="{ padding: '0 0 20px' }" title="芝麻免押租车押金">
          <page-form-row>
            <page-form-item size="1">
              <section>
                <page-form-item size="1" field="carFreezeDays" class="w-full body">
                  芝麻免押授权成功后，最长可冻结&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.carFreezeDays"
                    :min="1"
                    :max="999"
                    :defaultValue="365"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;
                </page-form-item>
                <div class="flex">
                  <span class="title">订单还车成功后是否自动执行租车转违章</span>
                  <a-tooltip content="违章押金金额为0元的暂不触发租车押金转违章押金">
                    <icon-question-circle style="font-size: 20px; color: #4e5969; margin-left: 8px" />
                  </a-tooltip>
                  <a-radio-group class="isEnabled-radio" v-model="todoDetail.carTransferViolationType">
                    <a-radio :value="1"> 自动转 </a-radio>
                    <a-radio :value="2"> 人工转 </a-radio>
                  </a-radio-group>
                </div>
              </section>
            </page-form-item>
            <page-form-item size="1">
              <section>
                <page-form-item
                  v-if="todoDetail.carTransferViolationType == 1"
                  size="1"
                  field="carTransferViolationTime"
                  class="w-full body"
                >
                  还车成功后&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.carTransferViolationTime"
                    :min="0"
                    :max="99999"
                    :defaultValue="60"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="分钟"
                  />&nbsp;&nbsp;自动转为违章押金
                </page-form-item>
                <div class="flex">
                  <span class="title">达到预计解冻时间是否自动解冻</span>
                  <a-radio-group class="isEnabled-radio" v-model="todoDetail.carUnfreezeType">
                    <a-radio :value="1"> 自动解冻 </a-radio>
                    <a-radio :value="2"> 人工解冻 </a-radio>
                  </a-radio-group>
                </div>
              </section>
            </page-form-item>
          </page-form-row>
        </card>
        <!-- 芝麻免押违章押金 -->
        <card :headerStyle="{ padding: '0 0 20px' }" title="芝麻免押违章押金">
          <page-form-row>
            <page-form-item size="1">
              <section>
                <page-form-item size="1" field="violationFreezeDays" class="w-full body">
                  转违章押金成功后，违章押金冻结&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.violationFreezeDays"
                    :min="1"
                    :max="999"
                    :defaultValue="30"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="天"
                  />&nbsp;&nbsp;
                </page-form-item>
                <div class="flex">
                  <span class="title">到达违章押金的预计解冻日期是否自动解冻</span>
                  <a-tooltip content="违章押金具体解冻时间为解冻日期的23点59分59秒">
                    <icon-question-circle style="font-size: 20px; color: #4e5969; margin-left: 8px" />
                  </a-tooltip>
                  <a-radio-group class="isEnabled-radio" v-model="todoDetail.violationUnfreezeType">
                    <a-radio :value="1"> 自动解冻 </a-radio>
                    <a-radio :value="2"> 人工解冻 </a-radio>
                  </a-radio-group>
                </div>
              </section>
            </page-form-item>
            <page-form-item size="1">
              <section>
                <page-form-item v-if="todoDetail.violationUnfreezeType == 1" size="1" field="violationUnfreezeTime" class="w-full body">
                  到达预计解冻时间后&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.violationUnfreezeTime"
                    :min="0"
                    :max="99999"
                    :defaultValue="10"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="小时"
                  />&nbsp;&nbsp;自动解冻
                </page-form-item>
              </section>
            </page-form-item>
          </page-form-row>
        </card>
        <!-- 订单取消 -->
        <card :headerStyle="{ padding: '0 0 20px' }" title="订单取消">
          <page-form-row>
            <page-form-item size="1">
              <section>
                <div class="flex">
                  <span class="title">订单取消成功后，冻结押金是否自动解冻</span>
                  <a-radio-group class="isEnabled-radio" v-model="todoDetail.orderCancelUnfreezeType">
                    <a-radio :value="1"> 自动解冻 </a-radio>
                    <a-radio :value="2"> 人工解冻 </a-radio>
                  </a-radio-group>
                </div>
              </section>
            </page-form-item>
            <page-form-item size="1">
              <section>
                <page-form-item v-if="todoDetail.orderCancelUnfreezeType == 1" size="1" field="orderCancelUnfreezeTime" class="w-full body">
                  取消成功后&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.orderCancelUnfreezeTime"
                    :min="0"
                    :max="99999"
                    :defaultValue="60"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="分钟"
                  />&nbsp;&nbsp;自动解冻
                </page-form-item>
              </section>
            </page-form-item>
          </page-form-row>
        </card>
        <!-- 订单作废 -->
        <card :headerStyle="{ padding: '0 0 20px' }" title="订单作废">
          <page-form-row>
            <page-form-item size="1">
              <section>
                <div class="flex">
                  <span class="title">订单作废成功后，冻结押金是否自动解冻</span>
                  <a-radio-group class="isEnabled-radio" v-model="todoDetail.orderDeleteUnfreezeType">
                    <a-radio :value="1"> 自动解冻 </a-radio>
                    <a-radio :value="2"> 人工解冻 </a-radio>
                  </a-radio-group>
                </div>
              </section>
            </page-form-item>
            <page-form-item size="1">
              <section>
                <page-form-item v-if="todoDetail.orderDeleteUnfreezeType == 1" size="1" field="orderDeleteUnfreezeTime" class="w-full body">
                  作废成功后&nbsp;&nbsp;
                  <i-input-number
                    v-model="todoDetail.orderDeleteUnfreezeTime"
                    :min="0"
                    :max="99999"
                    :defaultValue="60"
                    :allow-clear="false"
                    :precision="0"
                    :style="{ width: '150px' }"
                    unit="分钟"
                  />&nbsp;&nbsp;自动解冻
                </page-form-item>
              </section>
            </page-form-item>
          </page-form-row>
        </card>
      </page-form>
    </a-space>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, onMounted } from 'vue'
  import { useRoute } from 'vue-router'

  const props = defineProps({
    form: {
      type: Object,
      default: () => ({}),
    },
  })

  const rules = {
    carFreezeDays: [{ required: true, message: '请输入', trigger: 'blur' }],
    carTransferViolationTime: [{ required: true, message: '请输入', trigger: 'blur' }],
    violationFreezeDays: [{ required: true, message: '请输入', trigger: 'blur' }],
    violationUnfreezeTime: [{ required: true, message: '请输入', trigger: 'blur' }],
    orderCancelUnfreezeTime: [{ required: true, message: '请输入', trigger: 'blur' }],
    orderDeleteUnfreezeTime: [{ required: true, message: '请输入', trigger: 'blur' }],
  }
  const formRef = ref()
  const save = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((valid: any) => {
        if (valid) {
          reject()
          return false
        }
        console.log(todoDetail.value, 'todoDetail')

        resolve(todoDetail.value)
      })
    })
  }

  onMounted(() => {})

  const todoDetail = ref<any>()
  watch(
    () => props.form,
    (val: any) => {
      todoDetail.value = val
    },
    { immediate: true, deep: true }
  )

  defineExpose({
    save,
  })
</script>

<style lang="less" scoped>
  .rule-box {
    padding: 0 20px;
  }
  .active-border {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 1px solid #165dff;
  }
  .custom-card {
    overflow: hidden;
  }
  .rule-container {
    section {
      width: 100%;
    }
    .flex {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .body {
      padding: 15px 20px;
      background: rgba(247, 248, 250, 0.5);
    }
    .edit-btn {
      width: 60px;
      position: absolute;
      right: 50px;
      z-index: 999;
    }
    .title {
      font-size: 14px;
      font-weight: bold;
    }
    .switch {
      margin: 0 5px 0 35px;
    }
    .w-full {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }

    :deep(.arco-form-item) {
      margin-bottom: 0;
    }
  }
  .gray {
    color: #4e5969;
  }
</style>
